<template>
	<view>
		<van-empty description="什么都没有找到哦（：" v-if="records.length == 0"/>
		<u-toast ref="uToast" />
		<u-popup
		  v-model="show"
		   mode="right"
		  @close="onClose" length="70%"
		>
		    <view class="item-popup">   
		        <view class="price" style="display"> 价格 </view>
		
		                <u-cell-group :border="false">
		                    <u-field 
		                        v-model="minPrice"
		                        placeholder="请输入最低价"
		                        class="item-price-1"
		                    />
		                </u-cell-group>
						<view style="padding-left:235rpx"> </view>		                
		                <u-cell-group :border="false"> 
		                    <u-field
		                        v-model="maxPrice"
		                        placeholder="请输入最高价"
		                        class="item-price-1"
		                    />
		                </u-cell-group>
		        
		        <view>
		            <view class="price">发布时间</view>
		            <van-row gutter="20">
		                <van-col span="8">
							<u-button 
		                    data-index="1" 
		                    @tap="selectDay" 
		                    :type="selectDayIndex == 1?'success':'default'" 
		                    size="mini" shape="circle">
		                        一天内
		                    </u-button>
		                </van-col>
		                <van-col span="8">
		                    <u-button 
		                    data-index="2" 
		                    @tap="selectDay" 
		                    :type="selectDayIndex == 2?'success':'default'" 
		                    size="mini" shape="circle">
		                        半月内
		                    </u-button>
		                </van-col>
		                <van-col span="8">
		                    <u-button 
		                    data-index="3" 
		                    @tap="selectDay" 
		                    :type="selectDayIndex == 3?'success':'default'" 
		                    size="mini" shape="circle">
		                        一月内
		                    </u-button>
		                </van-col>                
		                
		            </van-row>
		
		        </view>
		
		        <view class="item-buttom-btn">
		            <van-button @tap="onClose" round plain type="info" class="r_btn"> 取 消  </van-button>
		            <van-button @tap="Determine"  color="#84adfb" round type="info" class="r_btn"> 确  定 </van-button>
		        </view>
		  
		    </view>
		
		</u-popup>
		
		<view>
		  <view class="itme-header">
		         <view class="select">
		            <view class="selection">
		                <view :class="select_active==1?'select-active select-text':'select-text'" @tap="SwitchOptions" data-index="1" >全部</view>
		                <view :class="select_active==2?'select-active select-text':'select-text'" @tap="SwitchOptions" data-index="2" >未售出</view>
		                <view :class="select_active==3?'select-active select-text':'select-text'" @tap="SwitchOptions" data-index="3" >我的</view>
		            </view>
		            <view class="sort">
		                <!-- {{sort}} -->
		                <view v-if="select_active==1?true:false" @tap="showPopup" class="showPopup">
		                    {{ select_title }}
		                    <text class="iconfont iconshezhi"></text>
		                </view>
		            </view>
		        </view>
		
		    </view>
		    <view class="content">
				<view class="left"> 
					<view class="item" v-for="(item,index) in records" :key="index" v-if="index%2==0">
						<image :src="item.imgUrlList.length > 0 ? item.imgUrlList[0]:'../../static/images/header.jpg'" 
							@tap="LookPic"
							:data-img="item.imgUrlList[0]?item.imgUrlList[0]:'../../static/images/header.jpg'" 
							:lazy-load="true"
							mode="widthFix" />
							<view class="item-info"
							:data-talkindex="index" :data-talkid="item.id" @tap="goTalkDetail"
							>
							<view class="item-content">
								<text> {{ item.content }}</text>
							</view>
							<view class="item-date">
								￥<text>{{ item.price }}</text>
							</view>
							<view style="margin-top:10rpx">
									<van-tag mark :type="item.isSale?'warning':'success'">{{ item.isSale?"买掉了":"自取" }}</van-tag>
							</view>
			
							</view>
			
							<view v-if="!isAdminShow&&is_My" class="item-bottom">
								<view class="item-bottom-btn" @tap="Delete" :data-index="index">
									<text class="cuIcon-roundclosefill lg text-gray"></text>
								</view>
								<view class="item-bottom-btn" @tap="Retrieve"  :data-index="index">
									<text class="cuIcon-roundcheckfill lg text-cyan"></text>
								</view>
							</view>
			
							<view class="item-bottom" v-if="isAdminShow">
								<view class="item-bottom-btn" @tap="AdminDelete"  :data-index="index">
									<text class="cuIcon-deletefill lg text-gray"></text>
								</view>
								<view class="item-bottom-btn" @tap="AdminLock"  :data-index="index">
									<text class="cuIcon-lock lg text-cyan"></text>
								</view>
							</view>
			
						</view>
				</view>
			
				<view class="right">
					<view class="item" v-for="(item,index) in records" :key="index" v-if="index%2==1">
						<image :src="item.imgUrlList.length>0?item.imgUrlList[0]:'../../static/images/header.jpg'" 
							@tap="LookPic"
							:data-img="item.imgUrlList[0]?item.imgUrlList[0]:'../../static/images/header.jpg'" 
							:lazy-load="true"
							mode="widthFix" />
							<view class="item-info"
							:data-talkindex="index" :data-talkid="item.id" @tap="goTalkDetail"
							>
								<view class="item-content">
									<text> {{ item.content }}</text>
								</view>
								<view class="item-date">
									￥<text>{{ item.price }}</text>
								</view>
								<view style="margin-top:10rpx">
									<van-tag mark :type="item.isSale?'warning':'success'">{{ item.isSale?"买掉了":"自取" }}</van-tag>
								</view>
			
							</view>
			
							<view v-if="!isAdminShow&&is_My" class="item-bottom">
								<view class="item-bottom-btn" @tap="Delete" :data-index="index">
									<text class="cuIcon-roundclosefill lg text-gray"></text>
								</view>
								<view class="item-bottom-btn" @tap="Retrieve"  :data-index="index">
									<text class="cuIcon-roundcheckfill lg text-cyan"></text>
								</view>
							</view>
			
			
							<view class="item-bottom" v-if="isAdminShow">
								<view class="item-bottom-btn" @tap="AdminDelete"  :data-index="index">
									<text class="cuIcon-deletefill lg text-gray"></text>
								</view>
								<view class="item-bottom-btn" @tap="AdminLock"  :data-index="index">
									<text class="cuIcon-lock lg text-cyan"></text>
								</view>
							</view>
			
						</view>
				</view>
		    </view>
			<view class="isOver" v-if="isOver">我也是有底线的</view>
		
		</view>
	</view>
</template>

<script>
	const user = require("../../../../common/api/user.js")
	const utils = require("../../../../utils/util.js")
	import Toast from '@/wxcomponents/vant/dist/toast/toast';
	import { getFleaMarketUsingGET,getFleaMarketFutureUsingGET, getMyFleaMarketUsingGET,setFleaMarketUsingGET,delFleaMarketUsingGET} from '../../../../common/api/forum'
	
	const admin = require("../../../../common/api/admin.js")
	export default {
		data() {
			return {
				records: [],
			    select_active:"1",
			    show: false,
			    // 最低 最高
			    minPrice:'',
			    maxPrice:'',
			    token:'',
			    is_My:false, // 控制我的页面按钮
			    selectDayIndex: '',// 选择时间
			    select_title: '筛选',
			    isAdminShow:false,
				QueryParams:{
				    page:1,
				    size:10
				},
				select_tit:'',
				isOver:false
			}
		},
		onLoad() {
			this.get_date()
		},
		onShow() {
			 // 检查登录状态
			utils.loginStatus();
			let token = uni.getStorageSync("token");
			let { userAvatar,authorities } = uni.getStorageSync("userInfo");
			this.token = token
			this.userAvatar = userAvatar
			user.loginStatusUsingGET(token)
			this.AnnounceDisplay(authorities)
		},
		methods: {
			// 管理员按钮
			AnnounceDisplay(authorities=[]){
			    authorities.forEach((v) =>{
			      // console.log(v)
			      if(v.authority == "ROLE_administrator"){
			        console.log("是认证用户")
			          this.isAdminShow = true
			      }
			    })
			}, 
			switchGetData(){
			    switch(this.select_active){
			      case "1":
			        console.log("1111")
			        this.get_date()
			        break;
			      case "2":
			        console.log("2222")
			        this.UnSold()
			        break;
			      case "3":
			        console.log("333")
			        this.MySold()
			        break;
			      default:
			        console.log("dddd")
			        console.log("ghsdghs")
			        break
			    }
			},
			get_date(){
			    this.is_My = false
			    let data = {
			      page:this.QueryParams.page,
			      size:this.QueryParams.size,
			      minPrice: this.minPrice,
			      maxPrice:this.maxPrice,
			      timeHorizon: this.selectDayIndex
			    }
			
			    let talkIdParams = utils.generateParams(data)
			    getFleaMarketUsingGET(talkIdParams, this.token).then(res=>{
			      
			      if(res.data.code==200){
			        let {records, size,total} = res.data.data;
			      
			      records.forEach((v,i) => {
					try {
					    v.imgUrlList = JSON.parse(v.imgUrlList) 
					}catch(err){
					    v.imgUrlList = []
					    console.log(err)
					}
			    	//v.imgUrlList = JSON.parse(v.imgUrlList) 
			    });
					// 关闭下拉刷新
					setTimeout(() => {
			        	this.records = [...this.records,...records]
						uni.stopPullDownRefresh()
					},1000)
			        this.size = size
			        this.total = total
			    }
			    	
			    })
			},
			// 看图片
			LookPic(e){
			    let image = e.currentTarget.dataset.img;
			    console.log(image,'55')
			    wx.previewImage({
			      current:image,
			      urls: [image],
			    })
			},
			// 页面跳转
			goTalkDetail(e) {
			    console.log(e.currentTarget.dataset.talkid)
			    var talkid = e.currentTarget.dataset.talkid
			    var talkindex = e.currentTarget.dataset.talkindex
			    console.log(talkindex)
			
			    console.log(JSON.stringify(this.records[talkindex]));
			    let records = this.records[talkindex]
			    
			    let records_1 = encodeURIComponent(JSON.stringify(records))
			
			    uni.navigateTo({
					url: '/pages/home/appmenu/fleaMarketDetail?talkid=' + talkid + '&talk=' + records_1,
					success: (result) => {
						console.log(result)
			    },
					fail: function (res) {
						console.log(res)
			    }
			    });
			
			},
			showPopup() {
			    this.show =  true
			},
			
			onClose() {
			    this.show = false,
			    this.maxPrice = '',
			    this.minPrice ='' 
			},
			// 确定
			Determine(){
				this.isOver = false
			    console.log("确定")
			    if(this.minPrice > this.maxPrice){
					this.$refs.uToast.show({
						title: '最低价不能大于最高价',
						type: 'primary',
						position: 'top'
					})
					
					return
			    }
			
			    this.records = []
			    this.QueryParams.page = 1
			    this.QueryParams.size = 10
				this.select_title = this.select_tit
			    this.get_date()
			    this.onClose()
			},
			// 点击切换分类
			SwitchOptions(e){
				this.isOver = false
			    this.select_active = e.currentTarget.dataset.index,
			    // 切分类之后 重新获取数据
			    this.QueryParams.page = 1
			    this.QueryParams.size = 10
			    this.records = []
				this.select_title = '筛选'
			    this.selectDayIndex = ''
			    switch(this.select_active){
			      case "1":
			        this.get_date()
			        break;
			      case "2":
			        this.UnSold()
			        break;
			      case "3":
			        this.MySold()
			        break;
			      default:
			        break
			    }
			},
			// 获取未售出
			UnSold(){
			    this.is_My = false
			    let data = {
			      page:this.QueryParams.page,
			      size:this.QueryParams.size
			    }
			
			    let talkIdParams = utils.generateParams(data)
			
			    getFleaMarketFutureUsingGET(talkIdParams,this.token).then(res=>{
			
			    let {records, size,total} = res.data.data;
			      
				records.forEach((v,i) => {
					try {
					    v.imgUrlList = JSON.parse(v.imgUrlList) 
					}catch(err){
					    v.imgUrlList = []
					    console.log(err)
					}
					//v.imgUrlList = JSON.parse(v.imgUrlList) 
				});
				this.records = [...this.records,...records], 
				this.size = size
				this.total = total	
			
			    })
			},
			MySold(){
			    this.is_My = true
			    let data = {
			      page:this.QueryParams.page,
			      size:this.QueryParams.size
			    }
			
			    let talkIdParams = utils.generateParams(data)
			
			    getMyFleaMarketUsingGET(talkIdParams, this.token).then(res=>{
			      let {records, size,total} = res.data.data;
			      
			    records.forEach((v,i) => {
					try {
					    v.imgUrlList = JSON.parse(v.imgUrlList) 
					}catch(err){
					    v.imgUrlList = []
					    console.log(err)
					}
			        //v.imgUrlList = JSON.parse(v.imgUrlList) 
			    });
			
			    this.records = [...this.records,...records],
			    this.size = size
			    this.total = total	
			    })
			},
			// 已经找回
			Retrieve(e){
				uni.showModal({
					content: '确定物品已卖出？',
					confirmText:'确定',
					confirmColor:'#0099ff',  
					cancelColor:'#0099ff',
					success: (res) => {
						if (res.confirm) {
							console.log("以找回")
							  let { index } = e.currentTarget.dataset
							  let data = {
							    fleaMarketId: this.records[index].id
							  }
							  let talkIdParams = utils.generateParams(data)
							  setFleaMarketUsingGET(talkIdParams ,this.token).then(res=>{
							    if(res.data.code==200){
									this.records.splice(index, 1)
							    }       
							})
						}
					}
				});
			},
			// 删除
			Delete(e){
				uni.showModal({
					content: '确定删除此告示？',
					confirmText:'删除',
					confirmColor:'#0099ff',  
					cancelColor:'#0099ff',
					success: (res) => {
						if (res.confirm) {
							console.log("删除")
							let { index } = e.currentTarget.dataset
							let data = {fleaMarketId: this.records[index].id}
							let talkIdParams = utils.generateParams(data)
							delFleaMarketUsingGET(talkIdParams ,this.token).then(res=>{
							  if(res.data.code==200){
								  this.records.splice(index, 1)
								}     
							})
						}
					}
				});
			    
			},
			selectDay(e){
			    console.log(e)
			    let {index} = e.currentTarget.dataset
			
			    let data = {
			      '1':"一天内",
			      '2':"半月内",
			      '3':"一月内"
			    }
			    this.selectDayIndex = index,
			    this.select_tit = data[index]
			},
			AdminDelete(e){
				uni.showModal({
					content: '确定删除此告示？',
					confirmText:'删除',
					confirmColor:'#0099ff',  
					cancelColor:'#0099ff',
					success: (res) => {
						if (res.confirm) {
							console.log(e)
							console.log("删除")
							let { index } = e.currentTarget.dataset
							let data = {
							  fleamarketId: this.records[index].id
							}
							let talkIdParams = utils.generateParams(data)
							admin.deleteFleamarketUsingGET(talkIdParams, this.token).then(res=>{
								if(res.data.code==200){
									this.records.splice(index, 1)
								} 
							})
						}
					}
				});
			    
			},
			AdminLock(e){
				uni.showModal({
					content: '确定锁定此告示？',
					confirmText:'锁定',
					confirmColor:'#0099ff',  
					cancelColor:'#0099ff',
					success: (res) => {
						if (res.confirm) {
							console.log("锁定")
							let { index } = e.currentTarget.dataset
							let data = {
							  fleamarketId: this.records[index].id
							}
							let talkIdParams = utils.generateParams(data)
							admin.lockFleamarketUsingGET(talkIdParams, this.token).then(res=>{
								if(res.data.code==200){
									this.records.splice(index, 1)
								}
							})
						}
					}
				});
			  
			}
		},
		onPullDownRefresh() {
			//调用刷新时将执行的方法
			this.isOver = false
			this.records = [],
			this.maxPrice = '',
			this.minPrice = '',
			this.selectDayIndex = '',
			this.select_title = "筛选"
			this.QueryParams.page = 1
			this.QueryParams.size = 10
			setTimeout(() => {
				this.switchGetData()
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			this.$refs.uToast.show({
				title: '已经到底了',
				type: 'warning'
			})		
			this.isOver = true
			// if(this.records.length>=this.total){
			//     uni.showToast({
			//         title: "已经到底了(:",
			//         icon: 'succes',
			//         duration: 1000,
			//         mask:true
			//     })
			//     return
			// }
			this.QueryParams.page++;
			this.switchGetData()
		}
	}
</script>

<style>
page {
  position: relative;
  padding-top: 80rpx;
  background-color: #eaeaea !important;
  width: 95%;
  margin: 0 auto;
}
.isOver{
	width: 100%;
	text-align: center;
	color: #C0C0C0;
	font-size: 25rpx;	
	padding: 10rpx 0;		
}
.show_notify {
  z-index: 999;
}
.itme-header {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.itme-header .select {
  display: flex;
  padding: 5rpx 10rpx;
  background-color: #f2f2f2;
}
.itme-header .select .selection {
  display: flex;
  flex: 3;
  text-align: center;
}
.itme-header .select .selection .select-text {
  width: 120rpx;
  border: 2rpx solid skyblue;
  border-radius: 20rpx;
  color: #515254;
  margin: 10rpx 10rpx;
  /*font-size: 24rpx;*/
}
.itme-header .select .selection .select-active {
  border-radius: 20rpx;
  background-color: #84adfb;
  color: #d3deeb;
}
.itme-header .select .sort {
  flex: 1;
  border-radius: 20rpx;
  justify-content: flex-end;
  color: #515254;
  margin: 10rpx 5rpx;
}
.itme-header .select .sort .showPopup {
  text-align: center;
}
.itme-header .select .select-active {
  border-radius: 20rpx;
  background-color: #84adfb;
  color: #d3deeb;
}
/* 瀑布流布局 */
.content {
  display: flex;
  flex: 0 0 46%;
}
.left {
  margin: 0 2%;
  /* height: 100vh;
   */
  /* background-color: aqua; */
  width: 100%;
}
.right {
  margin: 0 2%;
  /* height: 100vh;
  background-color: bisque; */
  width: 100%;
}
.item {
  /* 避免内部断行 */
  background-color: #ffffff;
  /* // box-shadow: 10rpx 10rpx 10rpx #888888;
  border-radius: 24rpx 24rpx 15rpx 15rpx; */
  border-radius: 24rpx 24rpx 15rpx 15rpx;
  margin-bottom: 20rpx;
}
.item-info {
  padding: 10rpx 30rpx;
}
.item-date {
  font-size: 24rpx;
  color: #bbb;
  /* margin-top: 20rpx; */
  /* 限制一行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-content {
	max-width: 200rpx;
	font-size: 38rpx;
	font-weight: bold;
  margin: 10rpx;
  color: #71cce0;
  word-break: break-all;
  /* 限制行数 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/*图片本身*/
.item image {
  width: 100%;
  /* 最大高度限制 */
  max-height: 500rpx;
  border-radius: 15rpx 15rpx 0 0;
}
.item-bottom {
  display: flex;
  justify-content: space-around;
}
.item-bottom-btn {
  font-size: 40rpx;
  text-align: center;
  padding: auto;
}
.item-popup {
  padding: 40rpx;
  height: 100%;
  width: 100%;
}
.item-popup .price {
  font-size: 30rpx;
  margin-top: 40rpx;
  margin-bottom: 30rpx;
}
.item-popup .item-price {
  background-color: aqua;
}
.item-popup .item-price .price-moddle {
  text-align: center;
  line-height: 80rpx;
  color: #464646;
}
.item-popup .item-price .van-cell {
  background-color: #f7f7f7;
  border-radius: 40rpx;
}
.item-popup .item-buttom-btn {
  position: fixed;
  left: 0;
  bottom: 40rpx;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


</style>
